<template>
  <BaseModal title="导入案件" icon="📥" :show="show" @close="$emit('update:show', false)">
    <form @submit.prevent="handleSubmit">
      <div class="form-section">
        <h3 class="section-title">
          <span class="section-indicator"></span>
          文件选择
        </h3>

        <div class="form-group">
          <label>案件文件</label>
          <div class="file-input-wrapper">
            <div class="input-wrapper flex-1">
              <span class="input-icon">📂</span>
              <input type="text" v-model="form.filePath" placeholder="请选择案件文件(.case)" readonly class="input-readonly">
            </div>
            <button type="button" class="btn-secondary" @click="selectFile">浏览</button>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">
          <span class="section-indicator"></span>
          安全与选项
        </h3>

        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" v-model="form.ignoreIntegrity">
            <span>
              🛡️ 忽略文件完整性检查
              <span class="hint-text">(仅在文件损坏时使用)</span>
            </span>
          </label>
        </div>

        <div class="form-group">
          <label>解密密码</label>
          <div class="input-wrapper">
            <span class="input-icon">🔑</span>
            <input type="password" v-model="form.password" placeholder="如果案件包已加密，请输入解密密码">
          </div>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" class="btn-cancel" @click="$emit('update:show', false)">✖️ 取消</button>
        <button type="submit" class="btn-save" :disabled="loading || !form.filePath">
          {{ loading ? '导入中...' : '📥 开始导入' }}
        </button>
      </div>
    </form>
  </BaseModal>
</template>
<script setup>
import { ref } from 'vue'
import BaseModal from './BaseModal.vue'
import { useCaseStore } from '../stores/case'

const props = defineProps({
  show: Boolean
})

const emit = defineEmits(['update:show', 'close', 'success'])
const caseStore = useCaseStore()
const loading = ref(false)

const form = ref({
  filePath: '',
  ignoreIntegrity: false,
  password: ''
})

const selectFile = async () => {
  if (window.electronAPI) {
    const result = await window.electronAPI.file.selectImportFile({
      filters: [{ name: '案件文件', extensions: ['case'] }]
    })
    if (result && !result.canceled && result.filePaths.length > 0) {
      form.value.filePath = result.filePaths[0]
    }
  }
}

const handleSubmit = async () => {
  if (!form.value.filePath) return
  
  loading.value = true
  try {
    if (window.electronAPI) {
      await window.electronAPI.case.import(form.value.filePath, {
        password: form.value.password,
        ignoreIntegrity: form.value.ignoreIntegrity
      })
      emit('success')
      emit('update:show', false)
    }
  } catch (error) {
    console.error(error)
    alert('导入失败: ' + error.message)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* Reuse styles or extract to global */
.form-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section-title {
  margin: 0 0 20px;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-indicator {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.file-input-wrapper {
  display: flex;
  gap: 10px;
}

.flex-1 {
  flex: 1;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #909399;
}

input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
}

input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
  outline: none;
}

.input-readonly {
  background: #f5f7fa;
  color: #606266;
  cursor: not-allowed;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
}

.hint-text {
  font-size: 12px;
  color: #909399;
  margin-left: 4px;
}

.btn-secondary {
  padding: 0 20px;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary:hover {
  border-color: #667eea;
  color: #667eea;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-cancel {
  padding: 10px 24px;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
}

.btn-save {
  padding: 10px 24px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>
